<template>
  <div class="dialogWrapper">
    <el-dialog
      :title="title"
      v-if="visible"
      :visible.sync="visible"
      width="800px"
      top="5vh"
      :before-close="handleClose"
    >
      <el-scrollbar class="scrollbar" ref="scrollbar">
        <div class="status-container">
          <template v-if="currentState == 0">
            <div class="status1">审核中</div>
            <img :src="passing" alt="" class="img" />
          </template>
          <template v-if="currentState == 2">
            <div class="status2">
              <div class="label">
                审核结果 <span class="result">未通过</span>
              </div>
              <div class="tips">原因：{{ form.auditSuggestion }}</div>
            </div>
            <img :src="notPass" alt="" class="img" />
          </template>
          <template v-if="currentState == 1">
            <div class="status3">
              <div class="label">审核结果 <span class="result">通过</span></div>
              <el-popover
                placement="bottom-start"
                popper-class="el-popover-self"
                trigger="hover"
              >
                <div class="card-list" v-if="cardNoList.length">
                  <div
                    class="item"
                    v-for="item in cardNoList"
                    :key="item.cardNo"
                  >
                    {{ item.cardNo }}
                  </div>
                </div>
                <div v-if="form.applyType != 3" class="tips" slot="reference">
                  查看职途卡号
                </div>
              </el-popover>
            </div>
            <img :src="pass" alt="" class="img" />
          </template>
        </div>
        <div class="form-container" ref="form-container">
          <el-form
            class="form"
            ref="form"
            :model="form"
            :rules="rules"
            size="small"
            label-width="130px"
            label-suffix="："
          >
            <el-form-item label="项目名称" prop="cardTypeName">
              <el-input
                v-if="!showReApplyBtn"
                :disabled="disabledForm"
                class="select"
                placeholder="请选择项目名称"
                v-model="form.cardTypeName"
              ></el-input>
              <div v-if="showReApplyBtn" class="flex position">
                <el-popover
                  placement="bottom-start"
                  width="600"
                  trigger="click"
                  v-model="appTreeVisible"
                >
                  <AppTree
                    :visible.sync="appTreeVisible"
                    @cancel="handleCancelPro"
                    @confirm="handleConfirmPro"
                  ></AppTree>
                  <el-input
                    :disabled="disabledForm"
                    slot="reference"
                    class="select"
                    placeholder="请选择项目名称"
                    v-model="form.cardTypeName"
                  ></el-input>
                </el-popover>
                <div class="icon-container" @click="handleAddNewProject">
                  <i class="el-icon-circle-plus-outline .self-icon"></i>
                  <span>新增</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="checkbox" label="申请权益" prop="rights">
              <div class="flex">
                <el-tag
                  v-for="(item, index) in form.rightList"
                  :key="index"
                  type="info"
                >
                  {{ item.rightName }}
                </el-tag>
              </div>
            </el-form-item>
            <el-form-item class="checkbox" label="客户单位" prop="appName">
              <span>{{ form.appName }}</span>
            </el-form-item>
            <el-form-item label="职途卡类型" prop="applyType">
              <el-select
                :disabled="disabledForm"
                class="select"
                v-model="form.applyType"
                placeholder="请选择职途卡类型"
              >
                <el-option
                  v-for="item in projectTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="form.applyType == 3"
              label="二维码有效期至"
              prop="codeExpireTime"
            >
              <el-date-picker
                class="select"
                :disabled="disabledForm"
                value-format="yyyy-MM-dd"
                v-model="form.codeExpireTime"
                type="date"
                placeholder="请选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              v-if="form.applyType == 3"
              label="职途卡密码"
              prop="codeKey"
            >
              <el-input
                :disabled="disabledForm"
                placeholder="请填写职途卡密码（选填）"
                v-model="form.codeKey"
              ></el-input>
            </el-form-item>
            <el-form-item label="职途卡用途" prop="isTest">
              <el-select
                class="select"
                :disabled="disabledForm"
                v-model="form.isTest"
                placeholder="请选择职途卡是否用于内部测试"
              >
                <el-option
                  v-for="item in isTestOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="showCardSource && form.applyState == 2"
              label="库存"
            >
              <span>{{ stockNum }} 张</span>
            </el-form-item>
            <el-form-item label="申请张数" prop="applyNum">
              <el-input
                :disabled="disabledForm"
                placeholder="请填写申请张数"
                v-model="form.applyNum"
                @input="checkIfNum"
              ></el-input>
            </el-form-item>
            <el-form-item label="有效期至" prop="expireTime">
              <el-date-picker
                :disabled="disabledForm"
                class="select"
                value-format="yyyy-MM-dd"
                v-model="form.expireTime"
                type="date"
                placeholder="请选择有效期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="申请人" prop="applyAdminName">
              <el-input
                :disabled="disabledForm"
                placeholder="请选择申请人"
                v-model="form.applyAdminName"
                @focus="handleFocusInput"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请部门" prop="department">
              <el-input
                disabled
                placeholder="选中申请人后申请部门自动填写"
                v-model="form.department"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请理由" prop="applyReason">
              <el-input
                :disabled="disabledForm"
                placeholder="请填写申请理由"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 4 }"
                v-model="form.applyReason"
              ></el-input>
            </el-form-item>
            <el-form-item label="单价" prop="cost">
              <el-input
                :disabled="disabledForm"
                placeholder="请填写单价"
                v-model="form.cost"
              >
                <template slot="append">元</template></el-input
              >
            </el-form-item>
            <el-form-item label="审核人" prop="auditObj">
              <el-select
                :disabled="disabledForm"
                class="select"
                v-model="form.auditObj"
                value-key="auditAdminId"
                placeholder="请选择审核人"
              >
                <el-option
                  v-for="item in auditerList"
                  :key="item.auditAdminId"
                  :label="item.auditAdminName"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="form.receiverName"
              label="收件人姓名"
              prop="receiverName"
            >
              <el-input
                :disabled="disabledForm"
                placeholder="请填写收件人姓名"
                v-model="form.receiverName"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="form.receiverPhone"
              label="收件人电话"
              prop="receiverPhone"
            >
              <el-input
                :disabled="disabledForm"
                placeholder="请填写收件人电话"
                v-model="form.receiverPhone"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="form.receiverAddress"
              label="收件地址"
              prop="receiverAddress"
            >
              <el-input
                :disabled="disabledForm"
                placeholder="请填写收件地址"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 4 }"
                v-model="form.receiverAddress"
              ></el-input>
            </el-form-item>
            <template v-if="showAuditBtn">
              <el-form-item label="是否通过申请" prop="applyState">
                <el-radio-group
                  v-model="form.applyState"
                  @change="handleChangePass"
                >
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="2">不通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                v-if="showNotPassReason"
                ref="notPassReason"
                label="不通过原因"
                prop="auditSuggestion"
              >
                <el-input
                  placeholder="请填写不通过申请的原因"
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 4 }"
                  v-model="form.auditSuggestion"
                ></el-input>
              </el-form-item>
            </template>
          </el-form>
        </div>
      </el-scrollbar>
      <div class="operation">
        <el-button
          v-if="showAuditBtn"
          class="btn"
          type="primary"
          @click="onSubmit"
          >确 定</el-button
        >
        <el-button
          v-if="showReApplyBtn"
          class="btn"
          type="primary"
          :loading="loading"
          @click="handleApplyAgain"
          >重新申请</el-button
        >
      </div>
    </el-dialog>
    <PersonSelect
      :visible.sync="personSelectVisible"
      width="70%"
      :selectedArr="selectedArr"
      :component="dataType"
      :multiple="false"
      @cancel="cancel"
      @confirm="selectConfirm"
    ></PersonSelect>
    <AddProjectDialog
      :visible.sync="addProjectVisible"
      :projectInfo="null"
      :showPerson="false"
      @confirm="handleConfirmAddPro"
    ></AddProjectDialog>
  </div>
</template>

<script>
import {
  applyDetail,
  audit,
  applyCard,
  getCardNoList,
  getStockNum,
} from "@/api/index";
import { checkPhoneValid } from "@/utils/validate";
import { findParentNodes } from "@/utils/getAllParentsId";
import pass from "@/assets/images/pass.png";
import passing from "@/assets/images/passing.png";
import notPass from "@/assets/images/notPass.png";
export default {
  name: "ApplyDetailDialog",
  components: {
    PersonSelect: () => import("@/components/PersonSelect"),
    AddProjectDialog: () => import("@/components/AddProjectDialog"),
    AppTree: () => import("./AppTree"),
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedRow: {
      type: Object,
      default: () => {},
    },
    localAppList: {
      type: Array,
      default: () => [],
    },
    auditerList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    var validateNumber = (rule, value, callback) => {
      if (this.form.applyType == 1) {
        if (value === "") {
          callback(new Error("请填写申请张数"));
        } else if (+value > +this.stockNum) {
          callback(new Error("输入数字已经超出库存，请重新输入"));
        } else {
          callback();
        }
      } else {
        if (value === "") {
          callback(new Error("请填写申请张数"));
        } else {
          callback();
        }
      }
    };
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("收件人电话不能为空"));
      } else {
        if (checkPhoneValid(value)) {
          callback();
        } else {
          callback(new Error("请填写正确格式的联系电话"));
        }
      }
    };
    var validateCost = (rule, value, callback) => {
      if (!value || value == 0) {
        return callback(new Error("请输入单价，单价要大于0，且只允许一位小数"));
      } else {
        const regex = /^\d+(\.\d{1})?$/;
        if (!regex.test(value)) {
          return callback(
            new Error("请输入单价，单价要大于0，且只允许一位小数")
          );
        } else {
          callback();
        }
      }
    };
    return {
      pass,
      passing,
      notPass,
      title: "",
      stockNum: 0,
      status: 3,
      appTreeVisible: false,
      addProjectVisible: false,
      form: {
        cardTypeName: "",
        applyType: "",
        isTest: "",
        codeExpireTime: "",
        applyAdminName: "",
        codeKey: "",
        applyNum: "",
        cardType: [],
        expireTime: "",
        applyReason: "",
        auditAdminId: "",
        auditAdminName: "",
        cost: "",
        department: "",
        auditObj: null,
        appName: "",
        receiverPhone: "",
        receiverName: "",
        rights: [],
        rightList: [],
        receiverAddress: "",
        applyState: "",
        auditSuggestion: "",
      },
      cardTypeList: [],
      disabledForm: true,
      showNotPassReason: false,
      isSamePerson: false,
      rules: {
        applyType: [
          { required: true, message: "请选择职途卡类型", trigger: "change" },
        ],
        isTest: [{ required: true, message: "职途卡用途", trigger: "change" }],
        applyNum: [
          { required: true, validator: validateNumber, trigger: "blur" },
        ],
        codeExpireTime: [
          {
            type: "string",
            required: true,
            message: "请选择二维码有效期",
            trigger: "change",
          },
        ],
        expireTime: [
          {
            type: "string",
            required: true,
            message: "请选择职途卡有效期",
            trigger: "change",
          },
        ],
        applyReason: [
          { required: true, message: "请填写申请理由", trigger: "change" },
        ],
        auditObj: [
          { required: true, message: "请选择审核人", trigger: "change" },
        ],
        cardType: [
          { required: true, message: "请选择客户单位", trigger: "change" },
        ],
        cardTypeName: [
          { required: true, message: "请选择项目名称", trigger: "change" },
        ],
        department: [
          { required: true, message: "请选申请部门", trigger: "change" },
        ],
        applyAdminName: [
          { required: true, message: "请填写申请人名称", trigger: "change" },
        ],
        cost: [{ required: true, validator: validateCost, trigger: "blur" }],
        receiverName: [
          { required: true, message: "请填写收件人名称", trigger: "blur" },
        ],
        receiverPhone: [
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
        receiverAddress: [
          { required: true, message: "请填写收件地址", trigger: "blur" },
        ],
        applyState: [
          { required: true, message: "请选择是否通过申请", trigger: "change" },
        ],
        auditSuggestion: [
          {
            required: true,
            message: "请填写不通过申请的原因",
            trigger: "blur",
          },
        ],
      },
      projectTypeOptions: [
        { label: "职途实体卡", value: 1 },
        { label: "职途电子卡", value: 2 },
        { label: "线上二维码", value: 3 },
      ],
      isTestOptions: [
        { label: "正式", value: 0 },
        { label: "测试", value: 1 },
      ],
      rightsOptions: [],
      apartmentOptions: [],
      projectApplicationOptions: [],
      reviewersOptions: [
        { label: "张海东", value: 1 },
        { label: "张海南", value: 2 },
        { label: "张海北", value: 3 },
      ],
      showAuditBtn: false,
      showReApplyBtn: false,
      personSelectVisible: false,
      showCardSource: false,
      loading: false,
      currentState: 0,
      selectedArr: [],
      dataType: "el-dialog",
      currentSelectApplyPersonInfo: {},
      cardNoList: [],
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.applyDetailFn();
          this.getCardNoListFn();
          this.getAppList();
          this.getStockNumFn();
        }
      },
      immediate: true,
    },
    selectedRow: {
      handler(val) {
        this.title = val.applyAdminName + "的申请详情";
      },
      deep: true,
      immediate: true,
    },
    "form.applyState": {
      handler(val) {
        if (val == 1 || val == 0) {
          this.showNotPassReason = false;
        } else {
          this.showNotPassReason = true;
        }
      },
      immediate: true,
    },
    "form.applyType": {
      handler(val) {
        this.$nextTick(() => {
          this.$refs["form"].clearValidate("applyNum");
        });
        if (val == 1) {
          this.showCardSource = true;
        } else {
          this.showCardSource = false;
        }
      },
    },
    "form.isTest": {
      handler() {
        this.getStockNumFn();
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleConfirmAddPro(val) {
      console.log("🚀 ~ handleConfirmAddPro ~ val:", val);
      this.form.cardType = 0;
      this.form.appName = val.appName;
      this.form.appId = val.appId;
      this.form.cardTypeName = val.cardTypeName;
      this.form.rightList = val.rights;
      this.form.cardVersion = "2";
      this.addProjectVisible = false;
    },
    handleCancelPro() {
      this.appTreeVisible = true;
    },
    handleConfirmPro(currentApp, currentPro) {
      this.form.appName = currentApp.appName;
      this.form.cardType = currentPro.cardType;
      this.form.cardTypeName = currentPro.cardName;
      this.form.rightList = currentPro.rightList;
      this.appTreeVisible = false;
    },
    handleAddNewProject() {
      this.addProjectVisible = true;
    },
    getStockNumFn() {
      const params = {
        applyType: this.form.applyType,
        isTest: this.form.isTest,
      };
      getStockNum(params).then((res) => {
        if (res.code == 200) {
          ``;
          this.stockNum = res.data;
        }
      });
    },
    getCardNoListFn() {
      const params = {
        applyId: this.selectedRow.applyId,
      };
      getCardNoList(params).then((res) => {
        if (res.code == 200 && Array.isArray(res.data)) {
          this.cardNoList = res.data;
        }
      });
    },
    handleApplyAgain() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm("请再次确认申请的事项是否正确", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.loading = true;
            const params = {
              ...this.form,
              cardType: this.form.cardType[this.form.cardType.length - 1],
              codeExpireTime: this.form.codeExpireTime
                ? this.form.codeExpireTime + " 23:59:59"
                : "",
              expireTime: this.form.expireTime + " 23:59:59",
              auditAdminId: this.form.auditObj.auditAdminId,
              auditAdminName: this.form.auditObj.auditAdminName,
              cost: this.form.cost * 100,
            };
            const temp = [];
            this.form.rightList.forEach((item) => {
              temp.push(item.rightId);
            });
            params.rights = temp.join("_");
            delete params.rightList;
            delete params.applyState;
            delete params.auditSuggestion;
            applyCard(params)
              .then((res) => {
                if (res.code == 200) {
                  this.$message.success("已提交申请，请等待审核");
                  const keys = Object.keys(this.form);
                  keys.forEach((key) => {
                    if (key == "auditObj") {
                      this.form[key] = null;
                    } else if (key == "rights") {
                      this.form[key] = [];
                    } else {
                      this.form[key] = "";
                    }
                  });
                  this.$emit("update:visible", false);
                  this.$emit("refresh");
                }
              })
              .finally(() => {
                this.loading = false;
              });
          });
        } else {
          return false;
        }
      });
    },
    getAppList() {
      const temp = [];
      this.localAppList.forEach((item, index) => {
        temp.push({
          label: item.appName,
          value: item.appId,
          parentId: 0,
        });
        const temp2 = [];
        if (item.cardTypeList) {
          item.cardTypeList.forEach((item2) => {
            temp2.push({
              label: item2.cardName,
              value: item2.cardType,
              disabled: item2.cardVersion == "2" ? false : true,
              parentId: item2.appId,
            });
          });
        }
        temp[index].children = temp2;
      });
      this.cardTypeList = temp;
    },
    applyDetailFn() {
      const params = {
        applyId: this.selectedRow.applyId,
      };
      applyDetail(params).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.form.auditObj = {
            auditAdminId: res.data.auditAdminId,
            auditAdminName: res.data.auditAdminName,
          };
          this.form.rightList = res.data.list;
          this.form.cost = res.data.cost
            ? (res.data.cost / 100).toFixed(1)
            : "";
          this.currentSelectApplyPersonInfo = {
            id: res.data.applyAdminId,
            name: res.data.applyAdminName,
            dept: res.data.department,
          };
          this.form.applyState =
            res.data.applyState == 0 ? "" : res.data.applyState;
          this.currentState = res.data.applyState;
          const userId = JSON.parse(sessionStorage.getItem("userInfo"))
            .user_source_id;
          const temp = this.auditerList.find(
            (item) => item.auditAdminId == userId
          );

          this.form.cardType = findParentNodes(
            this.cardTypeList,
            res.data.cardType
          );

          if (this.currentState == 0 && temp) {
            // 当前的申请状态处于待审核而且登陆人是审核人，显示审核按钮
            this.showAuditBtn = true;
            this.showReApplyBtn = false;
          } else if (
            this.currentState == 2 &&
            res.data.applyAdminId == userId
          ) {
            // 如果申请人和当前登陆人相同，显示确认按钮，可以修改和重新申请
            this.disabledForm = false;
            this.showReApplyBtn = true;
            this.showAuditBtn = false;
          } else {
            this.disabledForm = true;
            this.showReApplyBtn = false;
            this.showAuditBtn = false;
          }
        }
      });
    },
    handleFocusInput() {
      this.personSelectVisible = true;
    },
    selectConfirm(e) {
      this.currentSelectApplyPersonInfo = e[0];
      this.form.applyAdminName = e[0].name;
      this.form.applyAdminId = e[0].id;
    },
    cancel() {
      this.personSelectVisible = false;
    },
    scrollToBottom(ref) {
      // 使用 ref 获取到元素
      const element = ref ? ref.value : null;
      // 判断元素是否为空，以及元素是否存在于 DOM 中
      if (element && document.contains(element)) {
        // 设置滚动条位置到底部
        element.scrollTop = element.scrollHeight;
      }
    },
    handleChangePass(val) {
      if (val == 2) {
        this.showNotPassReason = true;
        this.$nextTick(() => {
          const scrollbarRef = this.$refs.scrollbar;
          scrollbarRef.wrap.scrollTop = scrollbarRef.wrap.scrollHeight;
        });
      } else {
        this.showNotPassReason = false;
      }
    },
    checkIfNum() {
      this.form.applyNum = this.form.applyNum.toString().replace(/\D/g, "");
    },
    onSubmit() {
      // 需要校验的字段
      let fieldsToValidate = this.showNotPassReason
        ? ["applyState", "auditSuggestion"]
        : ["applyState"];

      // 将回调转换为Promise
      Promise.all(
        fieldsToValidate.map((field) => {
          return new Promise((resolve, reject) => {
            this.$refs["form"].validateField(field, (errorMessage) => {
              resolve(errorMessage);
            });
          });
        })
      ).then((errorMessages) => {
        // errorMessages 里是各个字段的验证错误信息, 如果数组里全为空串则所有验证通过
        // 判断errorMessages 里是否全是空串
        let valid = errorMessages.every((errorMessage) => {
          return errorMessage == "";
        });

        if (valid) {
          this.loading = true;
          const params = {
            applyId: this.form.applyId,
            applyState: this.form.applyState,
            auditSuggestion: this.form.auditSuggestion,
          };
          audit(params)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("审核成功");
                this.handleClose();
                this.$emit("refresh");
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    handleClose() {
      const keys = Object.keys(this.form);
      keys.forEach((key) => {
        if (key == "list") {
          this.form[key] = [];
        } else if (key == "auditObj") {
          this.form[key] = null;
        } else {
          this.form[key] = "";
        }
      });
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style>
.el-popover.el-popper.el-popover-self {
  min-width: 20px !important;
}
</style>

<style lang="scss" scoped>
.scrollbar {
  height: 82vh;
  background: url("../../../../assets/images/dialogBg.png") no-repeat;
  background-position: center top;
  background-size: 100% 22%;
}
.card-list {
  max-height: 250px;
  overflow-y: scroll;
  .item {
    padding-right: 12px;
  }
}
.status-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid $grey-2;
  .status1 {
    font-size: 22px;
    color: #1e9ccb;
  }
  .status2 {
    .label {
      padding-bottom: 15px;
      font-size: 16px;
      color: #000;
    }
    .tips {
    }
  }
  .status3 {
    .label {
      padding-bottom: 15px;
      font-size: 16px;
      color: #000;
    }
    .result {
      font-size: 22px;
      font-weight: bold;
      color: #0cb354;
      padding-left: 15px;
    }
    .tips {
      font-size: 16px;
      color: #7052ff;
      cursor: pointer;
    }
  }
  .img {
    width: 120px;
    height: 120px;
    margin-left: 28px;
  }
}
.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 24px 0 24px;
  position: relative;
  padding-bottom: 60px;
  ::v-deep .el-form-item__label {
    color: #636e95;
  }
  .left-num {
    font-size: 14px;
    color: #f44716;
  }
  .form {
    width: 100%;
    .select {
      width: 100%;
    }
    .spe-select {
      width: 90%;
    }
    .checkbox {
      ::v-deep .el-form-item__content {
        display: flex;
      }
    }
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: $primary_color;
      font-size: 15px;
      .icon-container {
        display: flex;
        align-items: center;
        cursor: pointer;
        .self-icon {
          font-size: 18px;
          margin-right: 3px;
        }
      }
    }
    .position > span {
      display: block;
      width: 90%;
    }
    ::v-deep .el-tag.el-tag--info {
      margin: 0 8px 8px 0;
      color: #333;
    }
    ::v-deep .el-form-item--small.el-form-item {
      margin-bottom: 32px;
    }
  }
  ::v-deep .el-form-item__label {
    padding: 0 4px 0 0;
  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    color: #333;
  }
  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
    color: #333;
  }
}
::v-deep .el-dialog__header {
  padding-bottom: 20px;
}
::v-deep .el-dialog__body {
  padding: 0 !important;
}

.operation {
  width: 100%;
  padding: 15px 0;
  border-top: 1px solid $grey-2;
  background-color: #fff;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  z-index: 999;
  .btn {
    width: 200px;
  }
  ::v-deep .el-button--primary.is-plain,
  .el-button--primary.is-plain {
    background-color: #fff;
    border-color: $primary-color;
  }
  ::v-deep .el-button--primary.is-plain:hover,
  .el-button--primary.is-plain:focus {
    color: $primary-color;
  }
}
</style>
